<template>
  <div class="">
    <van-nav-bar
      title="购物车"
      left-text="返回" 
       left-arrow
      @click-left="onClickLeft"
      />
         
    <div class="goods-list">
      <div class="goods" v-for="(data, i) in list" :key="data._id + i">
        <!-- 此时的checked是我自己添加的 -->
        <van-checkbox v-model="data.checked" />
        <img class="goods-img" :src="data.product.coverImg" alt="" width="80px" height="80px">
        <div class="goods-info">
          <p>{{data.product.name}}</p>
          <span>￥{{data.product.price}}</span>
          <!--   data.product._id为商品id -->
          <button class="btn" @click="data.quantity > 1 && updatePro(data.product._id, -1)">-</button>
          <input type="text" :value="data.quantity">
          <button @click="updatePro(data.product._id, 1)">+</button>          <!-- data._id为单个购物车id -->
          <span v-if="data.checked" @click="del(data._id)">删除</span>
        </div>
      </div>
      <van-submit-bar :price="sumPrice * 100" button-text="结算" @submit="onSubmit">
        <van-checkbox v-model="checked">全选</van-checkbox>
        <van-icon name="delete" v-show="checked" @click="dels"/>
      </van-submit-bar>

    </div>
  </div>
</template>

<script>
import { loadCartlist, addToCart, delpro} from "../../api/cart";
import {addorder} from "../../api/order";
export default {
  components: {},
  data() {
    return {
      list: [],
      // checked: false,
      // ids: [],
      receiver: "",
      regions: "",
      address: "",
    };
  },
  computed: {
    checked: {
      // 如果购物车全选按钮是true，那么就全选，如果是false那么上面的不选中
      set(flag){
        // return this.list.forEach((item) => (item.checked = flag)); 这种方法不可以
        console.log(flag);
        // 动态添加属性
        this.list.map(item => this.$set(item, "checked", flag))
      },
      get(){
        // 如果购物车的总长度等于选中的总长度那么返回true
        return(this.list.length == this.list.filter(item => item.checked == true).length)
      }
    },
    // 获取选中的购物车列表
    selectgoods(){
      var selectlist = [];
      this.list.forEach(item => {
        if(item.checked){
          selectlist.push({
            quantity: item.quantity,
            product: item._id,
            price: item.product.price,
          })
          // this.ids.push(item._id)
        }
      })
      return selectlist;
    },
    // 计算总价
    sumPrice(){
      // 先选中勾选中的，然后计算他们的总价钱
      return  this.list.filter(item => {
        return item.checked
      }).reduce(function(pre,cur){
        return pre + cur.product.price * cur.quantity
      }, 0)
    }
  },
  watch: {},

  methods: {
   
    onClickLeft() {
      this.$router.push("/")
    },
    // 获取购物车列表
    async getcartlist() {
      const result = await loadCartlist();
      console.log(result);
      this.list = result.data;
    },
    // 点击+(num 为正数)或者-(num 为负数)更新购物车数量
    async updatePro(id, num){
       // 调用接口，添加购物车
       await addToCart(id, num);
       // 添加完购物车，我可以重新调用一次接口，这里我是添加购物车之后，把list数据进行更新
       this.list.forEach(data => {
         if(data.product._id == id){
           data.quantity = data.quantity + num;
         }
       })
    },
    // 删除单个购物车
    async del(id){
      const result = await delpro(id);
      console.log(result);
      // 删除成功，重新调用一下获取列表接口
      await this.getcartlist();
    },
    // 提交订单
    async onSubmit(){
      const result = await addorder({
        receiver: this.receiver,    
        regions: this.regions,      
        address: this.address ,      
        orderDetails: this.selectgoods,
      })
      console.log(result);
      await this.getcartlist();
    },
    // 删除购物车
    async dels(){
      console.log(1);
      // const result = await delcart(this.ids)
      // console.log(result)
    }
  },
  created() {
    // 初始化调用
    this.getcartlist();
    var data = localStorage.getItem("address");
    var datajson = JSON.parse(data)
    console.log(datajson);
    this.receiver = datajson.receiver;
    this.regions = datajson.regions;
    this.address = datajson.address;

  },
  mounted() {},
};
</script>
<style scoped>
  .goods {
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 15px;
  }
  .good-img {
    flex: 1;
    height: 80px;
    border: 1px solid #ccc;
  }
  .good-img img {
    width: 100%;
  }
  .goods-info {
    flex: 3;
  }
  input{
    text-align: center;
    width: 20px;
  }
  .btn{
    margin-left: 10px;
  }
</style>
